<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 800 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      const g = svg.append('g').attr('transform',`translate(${width/2},${height/2})`);

      let data ;
      let root ;
      let c ;
      (async function(){
        data = await d3.json('data/china_province_city.json')   
          
        root = d3.hierarchy(data,d=>d.area);

        root.sum(d=>+d.population).sort((n1,n2)=>n1.value-n2.value)

        const padding = 0.005;
        const p = d3.partition()
          .size([Math.PI * 2 , 350])
          .padding(padding)
          
        p(root)  

        c = d3.scaleOrdinal()
          .domain(root.children.map(d=>d.data.name))
          .range(d3.schemeSet2)


        const arc = d3.arc()
          .startAngle(d=>d.x0)
          .endAngle(d=>d.x1)
          .innerRadius(d=>d.y0)
          .outerRadius(d=>d.y1)


        g.selectAll('path')
          .data(root.descendants().filter(d=>d.parent!=null))
          .join('path')
          .attr('d',arc)
          .attr('fill',d=>c(d.ancestors().reverse()[1].data.name))


        g.selectAll('text')
          .data(root.descendants())
          .join('text')
          .attr('x',0)  
          .attr('y',0)  
          .attr('text-anchor','middle')  
          .attr('dominant-baselne','middle')
          .attr('font-size',10)
          .attr('transform',d=>{
            if(d.x0 == padding && d.y0 == padding){
              //根节点
              return null
            }
            const a = (d.x0 + d.x1)/2 * 180 / Math.PI
            const r = (d.y0 + d.y1) /2 
            return `rotate(${a-90}) translate(${r},0) rotate(${a<180?0:180})` 
          })  
          .text(d=>d.data.name)  

      })();

      
    </script>
  </body>
</html>
